<template>
  <div>
    <el-card class="box-card" style="margin: 1rem">
      <el-button
        type="primary"
        style="float: right; margin: 5px 5px 15px 5px"
        size="medium "
        :disabled="disabled"
        @click="addTitle"
        >添加动态标题</el-button
      >
    </el-card>
    <el-card class="box-card" style="margin: 1rem">
      <!-- 表格 -->
      <el-table
        :data="[list]"
        style="width: 100%"
        border
        stripe
        size="medium "
        :header-cell-style="{ background: '#ebeef5' }"
      >
        <el-table-column type="index" label="序号" width="180">
        </el-table-column>
        <el-table-column prop="title" label="标题"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button icon="el-icon-edit" type="text" @click="editTitle(row)"
              >修改</el-button
            >
            <el-popconfirm
              title="确认删除这条标题吗？"
              @confirm="deleteTitle(row)"
            >
              <el-button icon="el-icon-delete" type="text" slot="reference"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="40%"
        :before-close="handleClose"
      >
        <el-form
          ref="ruleFrom"
          label-width="150px"
          :model="formList"
          :rules="rules"
        >
          <el-form-item label="飘窗链接" prop="title">
            <el-input
              v-model="formList.title"
              placeholder="请输入标题"
              style="width: 350px"
              size="medium "
            >
            </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
// 引入mapgetters方法
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      disabled: "",
      // 弹窗标题
      title: "",
      list: { title: "请添加标题" },
      // 控制弹窗
      dialogVisible: false,
      // 表单数据
      formList: {
        title: "",
      },
      // 表单校验
      rules: {
        title: [{ required: true, message: "请选择标题", trigger: "blur" }],
      },
    };
  },
  // 组件挂载完毕
  mounted() {
    this.getList();
  },
  methods: {
    // 获取数据
    async getList() {
      let result = await this.$API.title.reqGetList();
      if (result.status == 200) {
        if (result.data.id != null) {
          this.list = result.data;
          this.disabled = true;
        } else {
          this.list = { title: "请添加标题" };
          this.disabled = false;
        }
      }
    },

    // 新增按钮
    addTitle() {
      this.formList = { title: "" };
      this.title = "新增标题";
      this.dialogVisible = true;
    },
    // 修改按钮
    editTitle(row) {
      this.title = "修改标题";
      this.formList = { ...row };
      this.dialogVisible = true;
    },
    // 弹窗确认按钮
    confirm() {
      this.$refs.ruleFrom.validate(async (success) => {
        if (success) {
          let obj = {};
          if (this.formList.id) {
            (obj.id = this.formList.id),
              (obj.title = this.formList.title),
              (obj.modifier = this.username);
          } else {
            (obj.title = this.formList.title), (obj.modifier = this.username);
          }
          let result = await this.$API.title.reqAddOrEdit(obj);
          if (result.status == 200) {
            this.getList();
            this.dialogVisible = false;
            this.$message({
              message: this.formList.id ? "修改成功" : "新增成功",
              type: "success",
            });
          }
        } else {
          return false;
        }
      });
    },
    // 关闭弹窗前的回调
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 删除按钮
    async deleteTitle(row) {
      let result = await this.$API.title.reqDelete(row.id);
      if (result.status == 200) {
        this.getList();
        this.$message({
          message: "删除成功",
          type: "success",
        });
      }
    },
  },
  computed: {
    ...mapGetters(["username"]),
  },
};
</script>

<style lang="scss" scoped></style>
